<template>
	<view>
		<!-- 盲盒开启动画 -->
		<uni-popup ref="popupBoxMore" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.8)">
			<view class="twoBox">
				<view class="twoBoxBox" v-if="prizeList.length==3">
					<!-- 开启数量3个时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex" style="display: flex;">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/941395d405ce48f1bcdc9e8c989ed4b8.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="twoBoxBoxFive" v-else-if="prizeList.length==5">
					<!-- 开启数量5个时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex" style="display: flex;margin-bottom: 12rpx;">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/941395d405ce48f1bcdc9e8c989ed4b8.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="twoBoxBox" v-else>
					<!-- 开启数量为其他时 -->
					<view v-for="(vv,vvindex) in boxList" :key="vvindex">
						<view class="twoBoxList" v-for="(ve,veindex) in vv" :key="veindex">
							<view class="twoBox_li">
								<view class="zm" :class="{'zm_no':ve.status}">
									<image class="imgBox" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/941395d405ce48f1bcdc9e8c989ed4b8.png" mode=""></image>
								</view>
								<view class="fm" :class="{'fm_no':ve.status}">
									<image class="fm_img" :src="ve.img" mode="aspectFill"></image>
									<view class="fmBox">
										<image :src="ImageList[ve.level-1]" mode=""></image>
										<view class="fmBoxText ellipseHide">{{ve.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cuoImg" style="width: 68rpx; height: 68rpx; margin-top: 100rpx;">
					<view style="width: 100%; height: 100%;" @click="close('popupBoxMore')" v-show="statusBox">
						<image class="imgBox" src="/static/blindbox/cuo_w.png" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 盲盒开启动画 -->
		<uni-popup ref="popupBoxOne" type="center" :is-mask-click="isMaskClick" @maskClick="maskClick"
			:animation="false" mask-background-color="rgba(0, 0, 0, 0.8)">
			<!-- 多个盲盒开启时出现ssr的情况isMaskClick=true -->
			<view class="oneBox" v-if="isMaskClick">
				<view class="rotateBox">
					<view class="boxsheets">
						<view class="box02">
							<view class="theOtherSide">
								<view class="theOtherSideImg">
									<image class="the01" :src="boxListAllo.img"></image>
									<image class="the02" :src="boxListAllo.img" mode="widthFix"></image>
									<image class="the03" :src="ImageList[boxListAllo.level-1]" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rotateBox_word" @click="closeMore()">
					<view class="" v-show="boxListAllo.status">
						{{boxListAllo.name}}
					</view>
				</view>
				<view class="butOne" @click="closeMore()" v-show="!statusBox">
					收下
				</view>
			</view>
			<!-- 单个盲盒开启 isMaskClick=false -->
			<view class="oneBox" v-else>
				<view class="rotateBox">
					<view class="positive" :class="flipShow?'flip_active':''" @click="flipShow=true">
						<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/df55dad571f643e196d6ad20cae0d1ac.png" mode=""></image>
					</view>
					<view class="box01 dc" :class="flipShow?'boxactive':''">
						<view class="box02 dc">
							<view class="theOtherSide dc">
								<view class="theOtherSideImg">
									<image class="the01" :src="boxListAllo.img"></image>
									<image class="the02" :src="boxListAllo.img" mode="widthFix"></image>
									<image class="the03" :src="ImageList[boxListAllo.level-1]" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rotateBox_word">
					<view class="mh" :class="flipShow?'mhShow':''">
						{{boxListAllo.name}}
					</view>
				</view>
				<view class="cuoImg" @click="close('popupBoxOne')"
					style="width: 68rpx; height: 68rpx; margin-top: 100rpx;">
					<image class="imgBox" src="/static/blindbox/cuo_w.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"open-box-animation",
		data() {
			return {
				boxListAllo: {
					id: 1,
					status: false,
					level: 1,
					name: '01',
					img: ''
				}, //单个
				ImageList: [
					'/static/blindbox/my-prize-ssr.png',
					'/static/blindbox/my-prize-sr.png',
					'/static/blindbox/my-prize-r.png',
					'/static/blindbox/my-prize-a.png',
					'/static/blindbox/my-prize-b.png',
				],
				isMaskClick: false, //单个时是否允许触摸阴影关闭弹窗
				prizeList: [], //盲盒开启数量
				flipShow: false,
				boxList: [], //盲盒开启数量列表
				boxListNum: 0, //盲盒数量列表
				boxListOriginal: [], //盲盒开启原始数据列表
				statusBox: true,
			};
		},
		methods:{
			openRef(data){
				// 1 一个盲盒 2十个盲盒
				this.prizeList = data.prizeList
				var prizeList =  JSON.parse(JSON.stringify(data.prizeList));  //深拷贝
				this.boxListNum = 0
				if(data.type == 1){
					
					this.isMaskClick = false
					this.boxListAllo = prizeList[0]
					this.$refs.popupBoxOne.open()
				}else{
					this.isMaskClick = true
					
					prizeList = prizeList.map(el => {
						el.status = false
						return el;
					})
					this.boxListOriginal = prizeList
					this.boxList = this.zhFunc(prizeList)
					this.dgXh()
					this.$refs.popupBoxMore.open()
				}
			},
			maskClick() {
				if (this.isMaskClick) {
					// this.boxListNum++
					this.dgXh()
				}
			},
			dgXh() {
				// console.log("this.boxListNum=========",this.boxListNum)
				// console.log('this.boxListOriginal.length888', this.boxListOriginal.length)
				// console.log(this.boxListNum < this.boxListOriginal.length)
				if (this.boxListNum < this.boxListOriginal.length) {
					this.timer = setTimeout(res => {
						// console.log(this.boxListNum)
						if (this.boxListOriginal[this.boxListNum].level == 1) {
							this.boxListAllo = JSON.parse(JSON.stringify(this.boxListOriginal[this.boxListNum]));
							this.$refs.popupBoxOne.open()
							this.boxListAllo.status = true
							this.boxListOriginal[this.boxListNum].status = true
							this.boxList = this.zhFunc(this.boxListOriginal)
							this.boxListNum++
							this.statusBox = false
						} else {
							this.boxListOriginal[this.boxListNum].status = true
							this.boxList = this.zhFunc(this.boxListOriginal)
							this.boxListNum++
							this.dgXh()
						}
					}, 300)
				}
			
			},
			zhFunc(array) {
				//准备二维数组
				let arr = [];
				let minArr = [];
				let num = 5
				let num1 = 2
				if (array.length == 10) {
					num = 6
				}
				if (array.length < 4) {
					num = 1
				}
				array.forEach((item, index) => {
					if (index < 3) {
						minArr.push(item)
					} else if (index < 8) {
						minArr.push(item)
					} else {
						minArr.push(item)
					}
					if (index == num1 || index == num) {
						arr.push(minArr)
						minArr = []
					}
				})
				if (minArr.length > 0) {
					arr.push(minArr)
				}
				return arr
			},
			closeMore() {
				this.$refs.popupBoxOne.close()
				this.statusBox = true
				this.dgXh()
			},
			open(attribute) {
				this.$refs[attribute].open()
			},
			close(attribute) {
				if (attribute == 'popupBoxMore' || attribute == 'popupBoxOne') {
		           this.flipShow = false
				}
				this.$refs[attribute].close()
			},
		}
	}
</script>

<style scoped>
	/* 翻牌动画 */
	.oneBox {
		width: 100%;
		/* padding-top: 132rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rotateBox {
		position: relative;
		width: 630rpx;
		height: 734rpx;
	}
	.butOne{
		width: 270rpx;
		height: 80rpx;		
		background: linear-gradient(90deg, #2A7FFC 3.08%, #4F36E5 100%);
		border-radius: 152rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		margin-top: 40rpx;
	}
	.mhShow {
		animation: mhactive 1s forwards ease-in;
	}
	
	@keyframes mhactive {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	.rotateBox_word {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
	}

	.rotateBox_word .mh {
		opacity: 0;
		/* animation: mhactive 1s forwards ease-in; */
	}

	@keyframes mhactive {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.dc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box01 {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		backface-visibility: hidden;
		width: 100%;
		height: 100%;
		padding: 14rpx;
		box-sizing: border-box;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/bd5da6ba4b9c4c2c91716cd8a474ec8f.png') no-repeat;
		background-size: 100% 100%;
		opacity: 0;
	}
	
	.boxactive {
		animation: boxactive 0.5s forwards linear;
	}
	
	@keyframes boxactive {
		0% {
			transform: rotateY(180deg) scale(0);
			opacity: 0;
		}
	
		100% {
			transform: rotateY(0deg) scale(1);
			opacity: 1;
		}
	}
	
	/* 单个开启动画 */
	.boxsheets {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		/* transform: scale(0); */
		opacity: 0;
		animation: domainactive 0.7s forwards linear;
		width: 100%;
		height: 100%;
		padding: 14rpx;
		box-sizing: border-box;
		/* background: #ffffff; */
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/bd5da6ba4b9c4c2c91716cd8a474ec8f.png') no-repeat;
		background-size: 100% 100%;
	}

	@keyframes domainactive {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.box02 {
		width: 100%;
		height: 100%;
		/* padding: 10rpx; */
		box-sizing: border-box;
		/* background: linear-gradient(325.23deg, #FF2828 -2.46%, #FFA620 91.8%); */
	}

	.theOtherSide {
		width: 100%;
		height: 100%;
		/* padding: 10rpx; */
		box-sizing: border-box;
		/* background: linear-gradient(180deg, #892CFF 0%, #2757FF 100%); */
	}

	.theOtherSideImg {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		padding: 0 14rpx 10rpx 0
	}

	.theOtherSideImg .the01 {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		filter: blur(10rpx);
	}

	.theOtherSideImg .the02 {
		position: absolute;
		z-index: 3;
		height: 100%;
		width: 588rpx;
	}

	.theOtherSideImg .the03 {
		position: absolute;
		z-index: 4;
		left: 6rpx;
		top: 6rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.positive {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
	}
	
	.flip_active {
		animation: positiveactive 0.5s forwards linear;
	}
	
	@keyframes positiveactive {
		0% {
			transform: rotateY(0deg) scale(1);
		}
	
		100% {
			transform: rotateY(180deg) scale(1);
		}
	}

	.positive image {
		width: 100%;
		height: 100%;
	}

	/*  */
	.twoBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.twoBoxBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
	.twoBoxBoxFive {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.twoBox_li {
		width: 220rpx;
		height: 256rpx;
		position: relative;
	}

	.zm,
	.fm {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		left: 0;
		top: 0;
		backface-visibility: hidden;
		transition: all 0.5s linear;
		box-sizing: border-box;
	}

	.zm {
		z-index: 3;
	}

	.fm {
		z-index: 2;
		/* border: 2rpx solid #ffffff; */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: scale(0);
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/bd5da6ba4b9c4c2c91716cd8a474ec8f.png') no-repeat;
		background-size: 100% 100%;
		padding: 6rpx 10rpx 20rpx 6rpx;
		width: 220rpx;
		height: 256rpx;
	}

	.fm .fm_img {
		/* width: 100%;
		height: 100%; */
		width: 200rpx;
		height: 230rpx;
	}

	.twoBoxList {
		display: flex;
		flex-direction: column;
		margin-right: 10rpx;
	}

	.twoBox_li {
		margin-bottom: 10rpx;
	}

	.zm_no {
		transform: rotateY(180deg);
	}

	.fm_no {
		opacity: 1;
		transform: scale(1);
		/* transform: rotateY(0deg); */
	}

	.fmBox {
		position: absolute;
		z-index: 5;
		/* width: 224rpx;
		height: 134rpx; */
		width: 100%;
		height: 100%;
	}

	.fmBox image {
		position: absolute;
		left: 4rpx;
		top: 6rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.fmBoxText {
		position: absolute;
		padding: 0 12rpx;
		box-sizing: border-box;
		line-height: 34rpx;
		bottom: 0;
		width: 100%;
		height: 34rpx;
		font-size: 20rpx;
		color: #ffffff;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 85.29%);
		border-radius: 0rpx 0rpx 8rpx 8rpx;
	}
	/*  */
	.obb_title{
		width: 75%;
		color: #FFFFFF;
		text-align: center;
		line-height: 1;
	}
	.obb_price{
		line-height: 2;
		font-size: 20rpx;
	}
	.text_line{
		text-decoration-line: line-through;
	}
	.sales_price{
		color: #FFFFFF;
		margin-right: 10rpx;
	}
	.original_cost{
		color: #FF90D8;
	}
	.one_price{
		color: #FFFFFF;
	}

	.but_box{
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/984ae520d2994b9fa3b266933eae6de5.png');
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.but_one {
		width: 316rpx;
		height: 126rpx;
		background-size: 100% 100%;
		margin-top: -34rpx;
	}
	
	.but_one .obb_title {
		font-size: 34rpx;
		margin-top: 10rpx;
	}
	
	.but_one .obb_price {
		font-size: 24rpx;
	}
	.but_two{
		width: 246rpx;
		height: 104rpx;
		background-size: 100% 100%;
		margin-right: 80rpx;
		margin-top: -18rpx;
	}
	.bc_box:last-child .but_two{
		margin-right: unset;
	}
	.but_two .obb_title{
		font-size: 28rpx;
		margin-top: 10rpx;
	}
	.but_two .obb_price{
		line-height: 1;
		font-size: 24rpx;
		margin-top: 6rpx;
	}
	.but_three{
		width: 202rpx;
		height: 100rpx;
		background-size: 100% 100%;
		margin-right: 30rpx;
		margin-top: 20rpx;
		padding-top: 4rpx;
	}
	.bc_box:last-child .but_three{
		margin-right: unset;
	}
	.but_three .obb_title{
		font-size: 24rpx;
		margin-top: 4rpx;
	}
	.but_three .obb_price{
		line-height: 1;
		font-size: 20rpx;
		margin-top: 4rpx;
	}
</style>